<template>
    <view>
        <view v-if="showPage&&role">
            <view class="head">
                <view class="uni-padding-wrap">
                    <view class="page-section swiper">
                        <view class="page-section-spacing">
                            <swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay"
                                :interval="interval" :duration="duration">
                                <swiper-item>
                                    <image mode="scaleToFill" src="../../static/BasicsBg.png"
                                        style="width: 100%;height:150px;"></image>
                                </swiper-item>
                                <swiper-item>
                                    <image mode="scaleToFill" src="../../static/BasicsBg.png"
                                        style="width: 100%;height:150px;"></image>
                                </swiper-item>
                            </swiper>
                        </view>
                    </view>
                </view>
            </view>
            <view class="menu">
                <view class="title">常用功能</view>
                <ul class="menu-ul">
                    <li v-if="0">
                        <div class="menu-item" @click="navTo('../customer/fullCustomer')">
                            <image src="../../static/icon/full_customer.png"></image>
                            <div>预约客户</div>
                        </div>
                    </li>
                    <li v-if="role!='兼职'">
                        <div class="menu-item" @click="switchTo('../customer/index')">
                            <image src="../../static/icon/customer.png"></image>
                            <div>客户列表</div>
                        </div>
                    </li>
                    <li>
                        <div class="menu-item" @click="navTo('../customer/add')">
                            <image src="../../static/icon/log.png"></image>
                            <div>新增客户</div>
                        </div>
                    </li>
                    <li>
                        <div class="menu-item" @click="navTo('../customer/index2')">
                            <image src="../../static/icon/log.png"></image>
                            <div>公海客户</div>
                        </div>
                    </li>
                    <li v-if="role!='兼职'">
                        <div class="menu-item" @click="navTo('../customer/seas')">
                            <image src="../../static/icon/log.png"></image>
                            <div>预约客户</div>
                        </div>
                    </li>
                    <li v-if="role!='兼职'">
                        <div class="menu-item" @click="navTo('/pages/user/video')">
                            <image src="/static/video.png"></image>
                            <div>学习视频</div>
                        </div>
                    </li>
                    <li v-if="role!='兼职'">
                        <div class="menu-item" @click="navTo('/pages/index/tree')">
                            <image src="/static/team.png"></image>
                            <div>我的团队</div>
                        </div>
                    </li>

                    <li v-if="role!='兼职'">
                        <div class="menu-item" @click="navTo('/pages/user/qrcode?t=tg')">
                            <image src="/static/tgicon.png"></image>
                            <div>推广码</div>
                            <view class="redBox" v-if="nums.shareCount||1">{{nums.shareCount}}</view>
                        </div>
                    </li>
                    <li v-if="role!='兼职'">
                        <div class="menu-item" @click="navTo('/pages/user/qrcode?t=hk')">
                            <image src="/static/hkicon.png"></image>
                            <div>获客码</div>
                            <view class="redBox" v-if="nums.resCount||1">{{nums.resCount}}</view>
                        </div>
                    </li>

                    <li>
                        <div class="menu-item" @click="navTo('/pages/index/data?t=gr')">
                            <image src="/static/tj.png"></image>
                            <div>个人数据</div>
                        </div>
                    </li>
                    <li>
                        <div class="menu-item" @click="navTo('/pages/index/data?t=je')">
                            <image src="/static/tj.png"></image>
                            <div>金额统计</div>
                        </div>
                    </li>
                    <li>
                        <div class="menu-item" @click="navTo('/pages/index/data?t=yh')">
                            <image src="/static/tj.png"></image>
                            <div>银行数据</div>
                        </div>
                    </li>
                    <li v-if="role=='董事长'||role=='总经理'">
                        <div class="menu-item" @click="navTo('/pages/index/data?t=gs')">
                            <image src="/static/tj.png"></image>
                            <div>公司数据</div>
                        </div>
                    </li>


                    <li v-if="role=='董事长'||role=='总经理'">
                        <div class="menu-item" @click="navTo('/pages/index/data?t=gsmb')">
                            <image src="/static/tj.png"></image>
                            <div>公司业务目标完成情况</div>
                        </div>
                    </li>
                    <li>
                        <div class="menu-item" @click="navTo('/pages/index/data?t=grmb')">
                            <image src="/static/tj.png"></image>
                            <div>个人业务目标完成情况</div>
                        </div>
                    </li>


                    <li v-if="list.length>1">
                        <picker @change="returnPickerType" :value="roleSelect" range-key="name" :range="list">
                            <div class="menu-item">
                                <image src="/static/video.png"></image>
                                <div>切换角色</div>
                            </div>
                        </picker>
                    </li>
                    <li v-if="0">
                        <div class="menu-item" @click="navTo('../user/product/productList')">
                            <image src="../../static/icon/product.png"></image>
                            <div>产品</div>
                        </div>
                    </li>
                    <li v-if="0">
                        <div class="menu-item" @click="navTo('../user/contract/index')">
                            <image src="../../static/icon/ht.png"></image>
                            <div>合同</div>
                        </div>
                    </li>

                </ul>
                <div style=" clear:both; visibility:hidden;"></div>
            </view>
            <view class="ybp" v-if="0">
                <view class="title" @click="openFilter">仪表盘</view>
                <div class="tongji">
                    <div class="title-head">
                        <div class="title-left">
                            <image src="../../static/menu.png"><span>销售统计</span>
                        </div>
                    </div>
                    <div>
                        <ul class="tongji-ul">

                            <li>
                                <div class="tongji-li">
                                    <div class="tongji-number">{{data.customerCount}}</div>
                                    <div class="tongji-name">新增客户</div>
                                </div>
                            </li>
                            <li>
                                <div class="tongji-li">
                                    <div class="tongji-number">{{data.customerContactCount}}</div>
                                    <div class="tongji-name">新增联系人</div>
                                </div>
                            </li>
                            <li>
                                <div class="tongji-li">
                                    <div class="tongji-number">{{data.visitCount}}</div>
                                    <div class="tongji-name">跟进记录</div>
                                </div>
                            </li>
                            <li>
                                <div class="tongji-li">
                                    <div class="tongji-number">{{data.contractCount}}</div>
                                    <div class="tongji-name">新增合同</div>
                                </div>
                            </li>
                            <li>
                                <div class="tongji-li">
                                    <div class="tongji-number">
                                        {{data.contractMoney!=null?data.contractMoney.toFixed(2):0.00}}
                                    </div>
                                    <div class="tongji-name">合同金额</div>
                                </div>
                            </li>
                            <li>
                                <div class="tongji-li">
                                    <div class="tongji-number">
                                        {{data.receivablesMoney!=null?data.receivablesMoney.toFixed(2):0.00}}
                                    </div>
                                    <div class="tongji-name">回款金额</div>
                                </div>
                            </li>
                            <li>
                                <div class="tongji-li">
                                    <div class="tongji-number">{{data.rateMoney!=null?data.rateMoney.toFixed(2):0.00}}
                                    </div>
                                    <div class="tongji-name">提成金额</div>
                                </div>
                            </li>
                        </ul>
                        <div style=" clear:both; visibility:hidden;"></div>
                    </div>

                </div>
            </view>
            <view class="ybp" v-if="0">
                <div class="tongji">
                    <view class="title-head">
                        <view class="title-left">
                            <image src="../../static/menu.png"><span>合同金额及目标</span>
                        </view>
                    </view>
                    <view class="qiun-charts">
                        <canvas canvas-id="canvasLineA" id="canvasLineA" class="charts"
                            @touchstart="touchLineA"></canvas>
                    </view>
                </div>
            </view>
            <view class="ybp" v-if="0">
                <div class="tongji">
                    <view class="title-head">
                        <view class="title-left">
                            <image src="../../static/menu.png"><span>业绩完成率</span>
                        </view>
                    </view>
                    <view class="qiun-charts">
                        <canvas canvas-id="canvasGauge" id="canvasGauge" class="charts"></canvas>
                    </view>
                    <view class="money">
                        <view class="money-item">
                            <p>目标金额</p>
                            <p>{{data.taskMoney}}</p>
                        </view>
                        <view class="money-item">
                            <p>完成金额</p>
                            <p>{{data.saleMoney}}</p>
                        </view>
                    </view>
                </div>
            </view>
        </view>
        <view v-else>
            <view class="Citem" v-for="i,j of list" @click="changeFn(i,j)">
                {{i.name}}
            </view>
        </view>
    </view>
</template>

<script>
    import api from '@/api/api.js';
    import uCharts from '@/js_sdk/u-charts/u-charts.js';
    var _self;
    var canvaLineA = null;
    var _self;
    var canvaGauge = null;
    export default {
        data() {
            return {
                dataType: 5,
                data: {},
                indicatorDots: true,
                autoplay: true,
                interval: 2000,
                duration: 500,
                cWidth: '',
                cHeight: '',
                pixelRatio: 1,
                gaugeWidth: 15,
                type: 'default',

                role: '', //角色
                roleSelect: '',
                list: [],
                showPage: !false,
                nums: {},
            };
        },
        onLoad(o) {
            // if (o.from == 'login') {
            //     this.showPage = false
            //     uni.hideTabBar()
            // }
            uni.setNavigationBarColor({
                frontColor: '#ffffff',
                backgroundColor: '#39b54a',
                animation: {
                    duration: 400,
                    timingFunc: 'easeIn'
                }
            })
            _self = this;
            this.cWidth = uni.upx2px(660);
            this.cHeight = uni.upx2px(500);

            var data = {};
            api.getConfig(data).then(
                res => {
                    if (res.code == 200) {
                        uni.setStorageSync('sysConfig', res.sysConfig);
                        //console.log(JSON.parse(res.sysConfig).tel)
                    } else {
                        uni.showToast({
                            icon: 'none',
                            title: "请求失败",
                        });
                    }
                },
                rej => {}
            );

        },
        onShow() {
            this.getUserRolesFn()
            this.getAchievement();
            // var that=this;
            //是否订阅首页通知---c弃用
            // var isSubscribe = uni.getStorageSync('isSubscribe');
            // if (isSubscribe != '1') {
            //     uni.showModal({
            //         title: '提示',
            //         content: '小程序需要订阅消息',
            //         success(res) {
            //             if (res.confirm) {
            //                 uni.requestSubscribeMessage({
            //                     tmplIds: that.baseConfig.msgTemp,
            //                     success(res) {
            //                         uni.setStorageSync('isSubscribe', '1')
            //                     },
            //                     fail(res) {
            //                         console.log(res.errMsg)
            //                     }
            //                 })
            //             }
            //         }
            //     })
            // }
            this.getmsgCount();

            api.getResMsgCount().then(r => {
                console.log('未读消息', r);
                if (r.counts - 0 <= 0) return
                uni.setTabBarBadge({
                    index: 2,
                    text: r.counts + ''
                })
                this.nums = r
            })
        },
        methods: {
            async getUserRolesFn() {
                let u = await api.getUserInfo({})
                console.log(333, u);
                api.getUserRoles({}).then(r => {
                    let res = {}
                    res.role = r.maps.appUse
                    let role
                    if (res.role.roleKey == 'admin') role = '董事长'
                    if (res.role.roleKey == 'all-manager') role = '总经理'
                    if (res.role.roleKey == 'sale-seller') role = '业务员'
                    if (res.role.roleKey == 'sale-manager') role = '业务主管'
                    if (res.role.roleKey == 'post-manager') role = '贷后主管'
                    if (res.role.roleKey == 'imp-manager') role = '执行主管'
                    if (res.role.roleKey == 'post-seller') role = '贷后'
                    if (res.role.roleKey == 'imp-seller') role = '执行'
                    if (u.user.dept.deptId == 121) role = '兼职'

                    this.role = role
                    uni.setStorageSync('role', role)
                    uni.setStorageSync('roleObj', res.role)
                    let list = r.maps.roleList.map(i => {
                        return {
                            id: i.roleId,
                            name: i.roleName
                        }
                    })
                    this.list = list
                    if (this.list.length == 0) {
                        this.showPage = true
                        uni.showTabBar()
                        uni.setNavigationBarTitle({
                            title: `首页`
                        })
                    } else {
                        if (!this.showPage) {
                            uni.setNavigationBarTitle({
                                title: `选择身份`
                            })
                        }
                    }
                    console.log(list);
                })
            },
            changeFn(i, j) {
                let id = i.id
                api.changeUserRoles({ roleId: id }).then(r => {
                    this.showPage = true
                    uni.showTabBar()
                    uni.setNavigationBarTitle({
                        title: `首页`
                    })
                })

            },
            returnPickerType(e) {
                let id = this.list[e.detail.value].id
                api.changeUserRoles({ roleId: id }).then(r => {
                    uni.showToast({
                        icon: 'none',
                        title: '操作成功'
                    })
                    this.getUserRolesFn()
                })


            },
            getmsgCount() {
                api.getMsgCount(null).then(
                    res => {
                        if (res.code == 200) {
                            if (res.counts == 0) {
                                uni.removeTabBarBadge({
                                    index: 2
                                })
                            } else {
                                uni.setTabBarBadge({
                                    index: 2,
                                    text: res.counts.toString()
                                })
                            }


                        } else {
                            uni.showToast({
                                icon: 'none',
                                title: "请求失败",
                            });
                        }
                    },
                    rej => {}
                );

            },
            getAchievement() {
                var data = { type: this.dataType };
                api.getAchievement(data).then(
                    res => {
                        if (res.code == 200) {
                            console.log(res.data)
                            this.data = res.data;
                            this.getServerData();
                            this.getServerData1();

                        } else {
                            uni.showToast({
                                icon: 'none',
                                title: "请求失败",
                            });
                        }
                    },
                    rej => {}
                );
            },
            switchTo(url) {
                uni.switchTab({
                    url: url
                })
                return
            },
            // 跳转页面
            navTo(url) {
                uni.navigateTo({
                    url: url
                })
            },
            openFilter() {
                return;
                uni.navigateTo({
                    url: './custFilter'
                })
            },
            getServerData1() {
                var ratio = 0.0;
                if (this.data.taskMoney == 0) {
                    ratio = 1;
                } else {
                    if (this.data.saleMoney > this.data.taskMoney) {
                        ratio = 1;
                    } else {
                        ratio = (this.data.saleMoney / this.data.taskMoney).toFixed(2)
                    }
                }

                var data = {
                    categories: [{
                        value: 0.2,
                        color: '#1890ff'
                    }, {
                        value: 0.8,
                        color: '#f04864'
                    }, {
                        value: 1,
                        color: '#2fc25b'
                    }],
                    series: [{
                        name: '完成率',
                        data: ratio
                    }]
                };
                _self.showGauge("canvasGauge", data);

            },
            // 获取数据，发请求
            getServerData() {
                let Line = { categories: [], series: [] };
                Line.categories = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
                Line.series = [{
                    name: "目标",
                    data: this.data.taskMoneys,
                    color: '#009100'
                }, {
                    name: "合同",
                    data: this.data.saleMoneys,
                    color: '#ff9900'
                }, {
                    name: "回款",
                    data: this.data.receivablesMoneys,
                    color: '#073763'
                }, {
                    name: "提成",
                    data: this.data.rateMoneys,
                    color: '#660000'
                }, {
                    name: "积分",
                    data: this.data.integralMoneys,
                    color: '#a64d79'
                }];
                // 找到id为canvasLine的块
                _self.showLineA("canvasLineA", Line);
            },
            showGauge(canvasId, chartData) {
                canvaGauge = new uCharts({
                    $this: _self,
                    canvasId: canvasId,
                    type: 'gauge',
                    fontSize: 11,
                    legend: { show: false },
                    title: {
                        name: Math.round(chartData.series[0].data * 100) + '%',
                        color: chartData.categories[1].color,
                        fontSize: 25 * _self.pixelRatio,
                        offsetY: 50 * _self.pixelRatio, //新增参数，自定义调整Y轴文案距离
                    },
                    subtitle: {
                        name: chartData.series[0].name,
                        color: '#666666',
                        fontSize: 15 * _self.pixelRatio,
                        offsetY: -50 * _self.pixelRatio, //新增参数，自定义调整Y轴文案距离
                    },
                    extra: {
                        gauge: {
                            type: 'default',
                            width: _self.gaugeWidth * _self.pixelRatio, //仪表盘背景的宽度
                            startAngle: 0.75,
                            endAngle: 0.25,
                            startNumber: 0,
                            endNumber: 100,
                            splitLine: {
                                fixRadius: 0,
                                splitNumber: 10,
                                width: _self.gaugeWidth * _self.pixelRatio, //仪表盘背景的宽度
                                color: '#FFFFFF',
                                childNumber: 5,
                                childWidth: _self.gaugeWidth * 0.4 * _self.pixelRatio, //仪表盘背景的宽度
                            },
                            pointer: {
                                width: _self.gaugeWidth * 0.8 * _self.pixelRatio, //指针宽度
                                color: 'auto'
                            }
                        }
                    },
                    background: '#FFFFFF',
                    pixelRatio: _self.pixelRatio,
                    categories: chartData.categories,
                    series: chartData.series,
                    animation: true,
                    width: _self.cWidth * _self.pixelRatio,
                    height: _self.cHeight * _self.pixelRatio,
                    dataLabel: true,
                });
            },
            // 展示图标的函数 接收参数，一个块的id,一个数据
            showLineA(canvasId, chartData) {
                canvaLineA = new uCharts({
                    $this: _self,
                    canvasId: canvasId,
                    // 图标类型
                    type: 'column',
                    fontSize: 11,
                    legend: { show: true },
                    dataLabel: false,
                    dataPointShape: true,
                    background: '#FFFFFF',
                    pixelRatio: _self.pixelRatio,
                    categories: chartData.categories,
                    series: chartData.series,
                    animation: true,
                    // x轴显示的内容
                    xAxis: {
                        type: 'grid',
                        gridColor: '#CCCCCC',
                        gridType: 'dash',
                        dashLength: 8
                    },
                    // y轴显示的内容
                    yAxis: {
                        gridType: 'dash',
                        gridColor: '#CCCCCC',
                        dashLength: 8,
                        splitNumber: 5,
                        min: 10,
                        max: 180,
                        format: (val) => { return val.toFixed(0) + '元' }
                    },
                    width: _self.cWidth * _self.pixelRatio,
                    height: _self.cHeight * _self.pixelRatio,
                    extra: {
                        line: {
                            type: 'straight'
                        }
                    }
                });

            },
            // 点击图表显示的内容
            touchLineA(e) {
                console.log(e);
                // 使用声明的变量canvaLineA
                canvaLineA.showToolTip(e, {
                    format: function(item, category) {
                        return category + ' ' + item.name + ':' + item.data
                    }
                });
            }

        }
    }
</script>

<style>
    .menu {
        margin: 10px;
    }

    .title {
        font-family: "Arial", "Microsoft YaHei", "黑体", "宋体", sans-serif;
        font-weight: bold;
        font-size: 28rpx;
        margin: 10px;
    }

    .menu-ul,
    .menu-ul li {
        width: 100%;
        list-style: none;
        /* 将默认的列表符号去掉 */
        padding: 0;
        /* 将默认的内边距去掉 */
        margin: 0;
        /* 将默认的外边距去掉 */
        float: left;
    }

    .menu-ul li {
        width: 25%;
    }

    .menu-item {
        padding-top: 5px;
        padding-bottom: 5px;
        text-align: center;
        vertical-align: middle;
        box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);
        border-radius: 5px;
        background-color: white;
        margin: 5px;
        position: relative;

    }

    .redBox {
        width: 40rpx;
        height: 40rpx;
        background: red;
        border-radius: 40rpx;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20rpx;
        position: absolute;
        right: 0rpx;
        top: 0rpx;
    }

    .menu-item p {
        font-size: 10px;
    }

    .menu-item image {
        width: 35px;
        height: 35px;
    }

    .ybp {
        margin: 10px;
    }

    .ybp .tongji {
        padding: 10px;
        box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);
        border-radius: 5px;
        background-color: white;

    }

    .title-head {
        margin-top: 5px;
        vertical-align: middle;
        height: 20px;
        font-size: 28upx;
        color: #000;
    }

    .title-left {

        float: left;
    }

    .title-left image {
        margin-right: 15upx;
        vertical-align: middle;
        width: 40upx;
        height: 40upx;
    }

    .tongji-ul,
    .tongji-ul li {
        text-align: center;
        vertical-align: middle;
        width: 100%;
        list-style: none;
        /* 将默认的列表符号去掉 */
        padding: 0;
        /* 将默认的内边距去掉 */
        margin: 0;
        /* 将默认的外边距去掉 */
        margin-top: 10px;
        margin-bottom: 10px;
        float: left;
    }

    .tongji-ul li {
        width: 25%;

    }

    .tongji-number {
        font-size: 14px;
        color: #000000;
        font-weight: bold;
    }

    .tongji-name {
        margin-top: 10px;
        color: #989898;
        font-size: 12px;

    }

    .qiun-charts {
        margin: 0 auto;
        width: 660upx;
        height: 500upx;
        background-color: #FFFFFF;
    }

    .charts {
        width: 660upx;
        height: 500upx;
        background-color: #FFFFFF;
    }

    .money {
        margin: 0 150upx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 25upx 0;
    }

    .money-item {
        text-align: center;
    }

    .Citem {
        display: flex;
        padding: 30rpx;
        align-items: center;
        justify-content: center;
        border-bottom: 1px solid #eee;
    }
</style>